<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane :label="title">
        <el-form
          :model="userInfo"
          :rules="rules"
          ref="userInfo"
          label-width="100px"
          class="demo-userInfo"
          style="display: flex; width: 100%; flex-wrap: wrap"
        >
          <el-form-item
            label="小区名称"
            prop="communityname"
            style="width: 50%"
          >
            <el-input v-model="userInfo.communityname"></el-input>
          </el-form-item>
          <el-form-item label="单元名称" prop="unitname" style="width: 50%">
            <el-input v-model="userInfo.unitname"></el-input>
          </el-form-item>
          <el-form-item label="栋数" prop="unitnum" style="width: 50%">
            <el-input v-model="userInfo.unitnum"></el-input>
          </el-form-item>

          <el-form-item label="状态选择" prop="unitstatus" style="width: 500px">
            <el-select v-model="userInfo.unitstatus" placeholder="请选择状态">
              <el-option label="已建成" value="1"></el-option>
              <el-option label="未建成" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资讯问候" prop="unitcontext">
            <tinymce-editor
              v-model="userInfo.unitcontext"
              :height="200"
            ></tinymce-editor>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="success-button">
      <el-button
        type="primary"
        class="fa fa-mail-reply"
        @click="$router.go(-1)"
      >
        返回</el-button
      >
      <el-button type="primary" class="fa fa-save" @click="preserve">
        保存</el-button
      >
    </div>
  </div>
</template>
<script>
import TinymceEditor from "@/components/Editor/index.vue";
export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      title: "",
      userInfo: {},
      userInfo: {
        communityname: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        unitcontext: "",
        u_id: 0,
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 保存
    preserve() {
      console.log(this.userInfo);
      if (this.title == "编辑单元") {
        this.$axiosToken({
          url: "/house/updateunitList",
          method: "post",
          data: this.userInfo,
          success: (res) => {
            this.$alert("确认提交消息", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message.success("成功");
                this.$router.push("/house/unit");
              },
            });
          },
        });
      } else {
        this.$axiosToken({
          url: "/house/addunitList",
          method: "post",
          data: this.userInfo,
          success: (res) => {
            this.$alert("确认提交消息", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
            this.$message.success("成功");
            this.$router.go(-1);
          },
        });
      }
    },
  },
  created() {
    this.title = this.$route.query.title;
    if (this.$route.query.value) {
      this.userInfo = JSON.parse(this.$route.query.value);
      this.userInfo.u_id = JSON.parse(this.$route.query.value).id;
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-select {
  .el-input--small {
    .el-input__inner {
      width: 620px;
    }
  }
}

.success-button {
  position: fixed;
  top: 27%;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 85px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px 15px;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-top: 10px;
  margin-left: 1px;
}
.fa-save:before {
  content: "\f0c7";
}
</style>